﻿@model CTM.Web.Models.View.Home.HomeViewModel
@{
    int totalConversation = Model.Conversations.Count();
    int totalFeedback = Model.Feedbacks.Count();
}

<!-- BEGIN CHART SECTION -->
<div class="row">
    <!-- BEGIN CONVERSATION STATUS CHART SECTION -->
    <div class="col-md-4 sortable-holder">
        <div class="alert bg-info sortable-object">
            <h4 class="sortable-handle">Conversation Status<span class="pull-right">Total: @totalConversation</span></h4>
            <div class="row">
                <div class="col-sm-8">
                    <div id="chart-status" style="height: 128px;"></div>
                </div>
                <div class="col-sm-4" style="padding-top: 15px;">
                    <p><span class="label label-success">@Model.Conversations.Count(c => c.Emoticon == CTM.Web.Utils.Emoticon.Smile) positive</span></p>
                    <p><span class="label label-warning">@Model.Conversations.Count(c => c.Emoticon == CTM.Web.Utils.Emoticon.Neutral) neutral</span></p>
                    <p><span class="label label-danger">@Model.Conversations.Count(c => c.Emoticon == CTM.Web.Utils.Emoticon.Frown) negative</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END CONVERSATION STATUS CHART SECTION -->
    <!-- BEGIN CONVERSATION CLASSIFY CHART SECTION -->
    <div class="col-md-4 sortable-holder">
        <div class="alert bg-warning sortable-object">
            <h4 class="sortable-handle">Conversation Classification<span class="pull-right">Total: @totalConversation</span></h4>
            <div class="row">
                <div class="col-sm-8">
                    <div id="chart-classification" style="height: 128px;"></div>
                </div>
                <div class="col-sm-4" style="padding-top: 15px;">
                    <p><span class="label bg-grey-darkgrey">@Model.Conversations.Count(c => c.Type == CTM.Web.Utils.PostType.Goals) goal</span></p>
                    <p><span class="label bg-blue-aqua">@Model.Conversations.Count(c => c.Type == CTM.Web.Utils.PostType.Career) career</span></p>
                    <p><span class="label bg-red-bittersweet">@Model.Conversations.Count(c => c.Type == CTM.Web.Utils.PostType.Individual) individual</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END CONVERSATION CLASSIFY CHART SECTION -->
    <!-- BEGIN FEEDBACK CHART SECTION -->
    <div class="col-md-4 sortable-holder">
        <div class="alert bg-danger sortable-object">
            <h4 class="sortable-handle">Feedback<span class="pull-right">Total: @totalFeedback</span></h4>
            <div class="row">
                <div class="col-sm-8">
                    <div id="chart-feedback" style="height: 128px;"></div>
                </div>
                <div class="col-sm-4" style="padding-top: 15px;">
                    <p><span class="label label-success">@Model.Feedbacks.Count(f => f.Emoticon == CTM.Web.Utils.Emoticon.Smile) positive</span></p>
                    <p><span class="label label-warning">@Model.Feedbacks.Count(f => f.Emoticon == CTM.Web.Utils.Emoticon.Neutral) neutral</span></p>
                    <p><span class="label label-danger">@Model.Feedbacks.Count(f => f.Emoticon == CTM.Web.Utils.Emoticon.Frown) negative</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END FEEDBACK CHART SECTION -->
</div>
<!-- END CHART SECTION -->
<!-- BEGIN TAB SECTION -->
<div class="panel">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab-notifications">Notifications</a></li>
        <li class=""><a data-toggle="tab" href="#tab-conversations">Conversations</a></li>
        <li class=""><a data-toggle="tab" href="#tab-feedback">Feedback</a></li>
    </ul>
    <div class="tab-content">
        <!-- BEGIN NOTIFICATIONS TAB SECTION -->
        <div id="tab-notifications" class="tab-pane fade active in">
            <div class="table-responsive">
                <table class="table" id="notification-result">
                    <tbody>
                        @Html.Partial("_Notification", Model.Notifications)
                    </tbody>
                </table>
            </div>
        </div>
        <!-- END NOTIFICATIONS TAB SECTION -->
        <!-- BEGIN CONVERSATION TAB SECTION -->
        <div id="tab-conversations" class="tab-pane fade">
            <form class="form-inline" onsubmit="getConversations(event);">
                <input type="hidden" name="Id" value="@Model.Id" />
                <input type="hidden" name="Year" value="@Model.Year" />

                <div class="form-group">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-rbvh btn-success active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="Statuses" value="Smile"> <span class="fa fa-lg fa-smile-o"></span>
                        </label>
                        <label class="btn btn-rbvh btn-warning active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="Statuses" value="Neutral"> <span class="fa fa-lg fa-meh-o"></span>
                        </label>
                        <label class="btn btn-rbvh btn-danger active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="Statuses" value="Frown"> <span class="fa fa-lg fa-frown-o"></span>
                        </label>
                    </div>

                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-rbvh grey-darkgrey active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="Types" value="Goals"> Goal
                        </label>

                        <label class="btn btn-rbvh blue-aqua active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="Types" value="Career"> Career
                        </label>

                        <label class="btn btn-rbvh red-bittersweet active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="Types" value="Individual"> Individual
                        </label>
                    </div>
                </div>

                <div class="input-group pull-right">
                    <input type="text" class="form-control" name="Keyword" placeholder="Keyword" />
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="text-right">No</th>
                            <th>Date</th>
                            <th>Manager</th>
                            <th>Conversation</th>
                            <th>Tags</th>
                            <th>Emoticon</th>
                            <th>Type</th>
                        </tr>
                    </thead>
                    <tbody id="conversation-result">
                        @Html.Partial("_Conversation", Model.Conversations)
                    </tbody>
                </table>
            </div>
        </div>
        <!-- END CONVERSATION TAB SECTION -->
        <!-- BEGIN FEEDBACK TAB SECTION -->
        <div id="tab-feedback" class="tab-pane fade">
            <form class="form-inline" onsubmit="getFeedbacks(event);">
                <input type="hidden" name="Id" value="@Model.Id" />
                <input type="hidden" name="Year" value="@Model.Year" />

                <div class="form-group">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-rbvh btn-success active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="Emoticons" value="Smile"> <span class="fa fa-lg fa-smile-o"></span>
                        </label>
                        <label class="btn btn-rbvh btn-warning active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="Emoticons" value="Neutral"> <span class="fa fa-lg fa-meh-o"></span>
                        </label>
                        <label class="btn btn-rbvh btn-danger active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="Emoticons" value="Frown"> <span class="fa fa-lg fa-frown-o"></span>
                        </label>
                    </div>

                    @*<div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-rbvh btn-primary active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="GivenToMe" value="True"> Feedback given to me
                        </label>
                        <label class="btn btn-rbvh btn-primary active">
                            <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                   name="GivenByMe" value="True"> Feedback given by me
                        </label>
                    </div>*@
                </div>

                <div class="input-group pull-right">
                    <input type="text" class="form-control" name="Keyword" placeholder="Keyword" />
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="text-right">No</th>
                            <th>Date</th>
                            @*<th>Associate</th>*@
                            <th>Author</th>
                            <th>Conversation</th>
                            <th>Tags</th>
                            <th>Emoticon</th>
                        </tr>
                    </thead>
                    <tbody id="feedback-result">
                        @Html.Partial("_Feedback", Model.Feedbacks)
                    </tbody>
                </table>
            </div>
        </div>
        <!-- END FEEDBACK TAB SECTION -->
    </div>
</div>
<!-- BEGIN TAB SECTION -->